<template>
    <Search @search="search" />
    <Desc v-if="isShow && begain" :descs="descs" />
    <!-- 正品 -->
    <div id="true" v-if="isShow && begain">
        <div class="result">
            <img src="@/assets/image/Group@3x.png" alt="" />
            <span>鉴定为真品,感谢您对我们的大力支持</span>
        </div>
        <h2 class="content-title">产品信息</h2>
        <div class="goods">
            <div
                :class="['goods-message', , index != trueData.length - 1 ? 'uderline' : '']"
                v-for="item in trueData"
                :key="item.id"
            >
                <span>{{ item.title }}</span>
                <span>{{ item.value }}</span>
            </div>
        </div>
    </div>
    <!-- 仿品 -->
    <div id="false" v-else-if="!isShow && begain">
        <div class="error">
            <img src="@/assets/image/Group@3x(1).png" alt="" />
            <h2>警告</h2>
            <span>此产品不为稳健医疗出品，给您带来的不便我们深表歉意，纯净的市场环境需要您我一同共创。</span>
        </div>
        <button class="btns btn-sure" @click="clear">确定</button>
        <button class="btns btn-up" @click="sendMessage">上报信息</button>
    </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'
import Search from '@/components/Search.vue'
import Desc from '@/components/Desc.vue'

export default defineComponent({
    name: 'Identify',
    emits: ['search'],
    components: { Search, Desc },
    setup() {
        const data = reactive({
            isShow: true,
            begain: false,
            descs: '该产品资质信息由稳健医疗Win+ Platform提供溯源技术服务，已扫码991次',
            trueData: [
                { id: 1, title: '产品名称', value: '医用一次性防护服' },
                { id: 1, title: '产品名称', value: '连身式180' },
                { id: 2, title: '产品规格型号', value: '20220316' },
                { id: 3, title: '生产批号', value: '2022.03.16' },
                { id: 4, title: '生产日期', value: '2027.03.15' },
                { id: 5, title: '使用期限', value: '稳健医疗用品股份有限公司' },
                { id: 6, title: '注册/备案人', value: '粤食药监械生产许可证20020537号' },
                { id: 7, title: '生产许可证', value: '粤械注准20212140706' },
                { id: 8, title: '产品注册号', value: '医用一次性防护服' },
                { id: 9, title: '受委托生产企业', value: '稳健医疗用品(荆门)有限公司' }
            ]
        })
        const clear = () => {
            data.begain = false
        }
        const sendMessage = () => {
            console.log('上报信息')
        }
        const search = value => {
            if (!value) {
                data.begain = false
            } else {
                if (value !== '123') {
                    data.begain = true
                    data.isShow = false
                } else {
                    data.begain = true
                    data.isShow = true
                }
            }
        }
        return {
            search,
            clear,
            sendMessage,
            ...toRefs(data)
        }
    }
})
</script>

<style scoped lang="scss">
@import '@/assets/css/global.scss';

#true,
#false {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#false {
    margin-top: 82px;

    .error {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200px;
        padding: 0 20px;
        margin-top: 16px;
        text-align: center;
        background: white;
        border-radius: 20px;

        img {
            width: 32px;
            height: 32px;
        }

        span {
            font-size: 14px;
            color: #999;
        }
    }
}

#true {
    margin-top: 140px;

    .result {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 16px 0;
        font-size: 20px;
        font-weight: 600;
        line-height: 80px;
        background: white;
        border-radius: 18px;

        img {
            width: 32px;
            height: 32px;
            margin-top: 20px;
        }

        span {
            font-size: 16px;
        }
    }

    .title {
        width: 100%;

        h2 {
            margin: 0;
            text-align: start;
        }
    }

    .goods {
        margin: 16px 0 36px 0;
        background: white;
        border-radius: 20px;

        .goods-message {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 90%;
            height: 42px;
            margin: 0 16px;
            line-height: 40px;

            > :first-child {
                font-size: 14px;
                color: #999;
            }

            > :nth-child(2) {
                overflow: hidden;
                font-size: 14px;
                text-overflow: ellipsis;
                word-break: break-all;
            }
        }
    }
}

.btns {
    width: 100%;
    height: 48px;
    margin: 10px 20px 0 0;
    text-align: center;
    border-radius: 10px;
    outline: none;
}

.btn-up {
    color: white;
    background-color: #0fbda6;
    border: none;
}

.btn-sure {
    color: #0fbda6;
    background-color: white;
    border: 1px solid #0fbda6;
}

.uderline {
    border-bottom: 1px solid #f5f5f5;
}
</style>
